<template>
  <div class="search-result-container">
    <!-- 点击实现后退效果 -->
    <van-nav-bar
      title="搜索结果"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <!-- <div>通过路由携带的参数为：</div> -->
    <!-- 通过props接收路由参数方法一 -->
    <!-- <div>{{ this.$route.params.kw }}</div> -->
    <!-- 通过props接收路由参数方法二
    1、先在index.js的routes中对应的对象里加入props: true
    2、在exports default中加入props
     -->
    <!-- <div>{{ kw }}</div> -->
    <!-- 循环渲染文章的item项组件 -->
    <!-- ArtItem在封装的时候封装了一个自定义属性closable，用来指定是否现实“叉号”小图标
    true表示展示小图标，false表示不展示
     -->
    <!-- immediate-check 是否在初始化时立即执行滚动位置检查,默认为true 改为false
    当拿到下一页数据之后，一定要记得把loading改为false
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <ArtItem
        v-for="item in artList"
        :key="item.art_id"
        :article="item"
        :closable="false"
      ></ArtItem>
    </van-list>
  </div>
</template>

<script>
// 按需导入API接口
import { getSuggResultAPI } from '../../api/searchAPI'
// 导入文章的item项组件
import ArtItem from '../../components/ArtItem/ArtItem.vue'
// 混入 1、导入混用模块
import mix from '@/mixins/scroll.js'
export default {
  name: 'SearchResult',
  props: ['kw'],
  // 混入 2、通过mixins数组，把导入的模块成员混入到当前组件中
  mixins: [mix],
  data () {
    return {
      // 页码值，默认请求第一页数据
      page: 1,
      // 文章的列表数据
      artList: [],
      // 是否正在请求数组
      loading: true,
      finished: false
    }
  },
  watch: {
    // 监听kw的变化
    kw () {
      this.page = 1
      this.artList = []
      this.loading = false
      this.finished = false
      // 请求数据
      this.initSearchResult()
    }
  },
  components: {
    ArtItem
  },
  created () {
    // 进入页面就执行
    this.initSearchResult()
  },
  // 使用混入，复用scroll.js中的代码，不用在多个文件中一遍遍写，而且改一份就都改变了
  // activated () {
  //   // 在组件被激活时，立即监听窗口的滚动事件
  //   window.addEventListener('scroll', this.scrollHandler)
  // },
  // deactivated () {
  //   // 在组件被缓存时，立即移除窗口的滚动事件
  //   window.removeEventListener('scroll', this.scrollHandler)
  // },
  methods: {
    // 处理滚动条滚动的事件  混入模块复用，不需要写了
    // scrollHandler () {
    //   console.log(window.scrollY)
    //   this.$route.meta.top = window.scrollY
    // },
    // 初始化搜索结果的方法
    async initSearchResult () {
      const { data: res } = await getSuggResultAPI(this.kw, this.page)
      if (res.message === 'OK') {
        // this.artList = res.data.results // 这是直接覆盖，应该是数据拼接
        // this.artList = [旧数据，新数据]
        this.artList = [...this.artList, ...res.data.results]
        // loading 重置为false，否则无法发起下一页请求
        this.loading = false
        if (res.data.results.length === 0) {
          // 证明没有下一页数据
          this.finished = true
        }
      }
    },
    // 快滚动到页面底部的时候自动触发onLoad
    onLoad () {
      // 1、先让页码值自增加1
      this.page++
      // 2、再次调用initSearchResult方法
      this.initSearchResult()
    }
  }
  // ,
  // 在即将通过路由离开的时候把滚动条的位置记录下来传递给meta元信息
  // beforeRouteLeave (to, from, next) {
  //   from.meta.top = window.scrollY
  //     next()
  // }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
